
Native Apps in HTML5? 

Yes. Yes you can. 
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About Me 


Joe Marini 

Developer Advocate for Google Chrome 



http://plus.ly/joemarini 


^ @joemarini 


https://github.com/joemarini 
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Agenda 

Web Apps vs. Native Apps? 

Overview of Chrome Packaged Apps 
Demos 

Anatomy of Packaged Apps 

Distribution and Monetization 

Becoming a Packaged App / CWS Developer 
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Web Apps are Great! 
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... Until They're Not. 


google.com 



liP> aooale.com 


Your device is offiine 


The webpage at http://google.com/ cannot be reached because your network 
connection is down. The page will be loaded when the network connection is 
restored. 

Try loading the page anvwav 
Network settings 
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Web Games are Great! 




Google 

... Until They're Not. 
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As Great as the Web is, There are Some Limitations 

• Hard to do offline well - AppCache support is inconsistent 
o And even then, AppCache has its set of problems 

• Advanced features aren't universally available 

o Accessing the file system 
o Using WebGL and WebRTC 

o Advanced JavaScript features like WebSockets and WebWorkers 

• Very little support for accessing hardware 

o USB, Bluetooth, Camera, Microphone, etc. 

• Running across multiple browsers and platforms is challenging 
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CHROME PACKAGED APRS 
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The Goal of Chrome Packaged Apps 


Give users the convenience and 
experience of native applications... 

... while leveraging the deployment 
and security of the web 
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Basics of Chrome Packaged Apps 

1) Run independently and outside of the browser UX 

2) Provide expanded APIs to access hardware and much more 

3) Run offline, by default 

4) Are distributed via the Chrome Web Store 

5) Are monetized the way you want them to be 
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Rich, Immersive Ul - Outside the Browser 
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Uniform, Common Launcher Experience 
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PACKAGED APP DEMO 
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ANATOMY OF CHROME PACKAGED APRS 
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The Packaged Apps Conceptual Programming Model 


Web Apps Extensions 

1 Chrome Packaged Apps 


Chrome Browser UX 
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Components of a Packaged App 


manifest.json 

Information about the app - 
permissions, version, etc 


•N 


background.js 

App startup - set up events, 
create windows, etc 


Other HTMLJS, CSS 

Your application logic and 
user interface files 


1 



Application. crx 
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Typical Manifest File 

manifest . j son : 

{ 

"name": "Hello World!", 

"description": "My first Chrome platform app . " , 

"manifest_version" : 2, 

"version" : "1.2. 3. 4", 

"app" : { 

"background" : { 

"scripts": [ "background . j s " ] 

} 

}. 

"permissions": ["experimental", "windows"], 

"icons": { "16": " icon_l 6 . png" , "128": " icon_12 8 . png" } 

} 
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A Sampling of the Chrome APIs 

• alarms 

• app.window 

• app. runtime 

• bluetooth 

• commands 

• contextMenus 

• events 

• fileSystem 

• identity 

• notifications 


mediaGalleries 

permissions 

pushMessaging 

runtime 

serial 

socket 

storage 

system Info 

tts 

usb 
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DISTRIBUTION AND MONETIZATION 


Google Confidential and Proprietary 


Google 

The Chrome Web Store 



chrome web store 

Search Apps 


Home 


Popular 

From your circles 

Trending 

Collections 

Business Tools 

Education 

Entertainment 

Games 

Lifestyie 

News & Weather 
Productivity 

Social & Communication 
Utilities 

Extensions 

Themes 
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The Chrome Web Store - The Three Ds 


Discovery 

Distribution 

Dinero 

Help users discover 

Give developers an 

Provide monetization 

and consume great 

easy way to get their 

options for developers 

content for Chrome 

content into the hands 



of consumers 

• One-time pay 

• Apps 

• Websites 

• Updates 

• Ad-supported 

• Partial Rollouts 

• In-App Payment 

• Extensions 

• Third-party pay 

• Themes 

• Reviews 

• Analytics 

• User Feedback 
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Chrome Web Store: Discovery 


Reach: 


Exposure: 


Community: 


- 10s of millions of unique visitors per month 

- In 40+ countries around the world 

- Major traffic sources: US, EU, BR, RU, IN 

- CWS search integrated with Google Search 

- Various opportunities for promotion in store 

- Developers can supply and update images 

- Integrated with GPIus "+1" 

- Direct-to-developer feedback option 
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Chrome Web Store: Distribution 


Management: - Publish to "trusted testers" 

- Update graphic assets at your leisure 


Deployment: - CWS handles scaled rollout of updates 

- Ability to deploy to % of users 

- Detection of user platform capabilities 

Measurement: - Integration with Google Analytics 

- Detailed Impression/lnstall Reports 
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Chrome Web Store: Dinero 

Multiple Payment Models: 

- One-time pay-per-download 

- Ad supported (AdMob) 

- Subscription payments 

- Integration with Google Wallet 

Support for Third-Party Payments 

- Choose your own payment provider 
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How to Get Started 

1 . Get the latest Chrome Canary 

2. Visit developer.chrome.com/apps 

3. Download the samples from github.com/GoogleChrome 

4. Follow the code lab: github. 
com/GoogleChrome/chrome-app-codelab 

5. Sign up for a Chrome Web Store dev account 

6. Build an app 

7. Publish 
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Where to Learn More 

• http://developer.chrome.com/apps 

• http://aithub.com/GooaleChrome/chrome-app-samples 

• StackOverflow: Follow the google-chrome-app tag 

• http://bloa.chromium.org 

• http://aithub.com/GooaleChrome/chrome-code-lab 

• Check out Chrome Apps on Google Developers Live: 

o https://developers.aooale.com/live/chrome/ 
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thank you. 
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